<template>
    <!-- 用户信息框 -->
    <div class="user-panel">
        <!-- 左侧图像 -->
        <AvatarBase :userId="userInfo.userId || userInfo.contactId" :width="60" :borderRadius="5" :showDetail="true">
        </AvatarBase>
        <!-- 右侧信息 -->
        <div class="user-info">
            <div class="nick-name">
                <!-- 用户名 -->
                {{ userInfo.nickName }}
                <!-- 性别图标 -->
                <span v-if="userInfo.gender == 1" class="iconfont icon-man"></span>
                <span v-if="userInfo.gender == 0" class="iconfont icon-woman"></span>
            </div>
            <!-- 用户id -->
            <div class="info">ID: {{ userInfo.userId || userInfo.contactId }}</div>
            <!-- 地区信息，使用Utils解析 -->
            <div class="info" v-if="showArea">地区: {{ proxy.Utils.getAreaInfo(userInfo.areaName) }}</div>
        </div>
    </div>
</template>

<script setup>
import AvatarBase from './AvatarBase.vue';
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();

const props = defineProps({
    userInfo: {
        type: Object,
        default: {}
    },
    showArea: {
        type: Boolean,
        default: true
    },
})
</script>

<style lang="scss" scoped>
.user-panel {
    display: flex;
    padding-bottom: 20px;

    .user-info {
        flex: 1;
        margin-left: 10px;

        .nick-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000000;
            font-size: 16px;

            .iconfont {
                font-size: 13px;

            }

            .icon-man {
                color: #30b5fd;
            }

            .icon-woman {
                color: #f8923e;
            }
        }
    }

    .info {
        font-size: 12px;
        color: #9e9e9e;
        margin-top: 3px;
    }
}
</style>
